<template>
	<view style='height: 100vh;overflow: hidden;' class='bg-gray'>
		<div class="page-header" style="height:110px;z-index: 2;">
			<div class="title-header">
				<div class="-goback" @click="goHome()">&nbsp;</div>
				<div class="-title">购买记录</div>
			</div>
		</div>
		
		<div class="-body">
			<scroll-view scroll-y @scrolltolower="handleScrollToLower"  style="height:100%">
				<div style="height:calc(100% - 20px);padding:10px 0;">
					<template v-if="list.length<1">
						<view style="text-align: center;margin:20px 0;color:gray">暂无数据</view>
					</template>
					<template v-for="(item,index) in list" :key="item.id">
						<div class="-item">
							<div class="cover">
								<div class="bg-image"
									:style="'height:100%;width:100%;background-image:url(\''+item.cover+'\');'"></div>
							</div>
							<div class="detail">
								<div class="text-bold ellipsis">{{item.title}}</div>
								<div class="d-flex a-center mt-5 text-dark">
									<div class="text-small -chip">￥{{item.price}}</div>
									<div class="text-small -chip">{{item.book_chamber_name}}</div>
								</div>
								<div class="text-small mt-5 text-dark">{{item.buy_time}}</div>
							</div>
						</div>
					</template>
				</div>
			</scroll-view>
		</div>
	</view>
</template>

<script>
	import com from '../common/index.js'
	export default {
		data() {
			return {
				mpTitle:com.mpTitle,
				list: [], // 数据列表
				page: 1, // 当前页码
				limit: 10, // 每页数量
			}
		},
		methods: {
			goHome() {
				uni.navigateBack()
				// uni.navigateTo({
				// 	url: "/pages/homepage"
				// })
			},
			getData() {
				const that = this
				com.poster(`/miniapi/member/buy-log?first=${this.page}&limit=${this.limit}`, {}, 'get', (e) => {
					console.log(e.data.list)
					if (e.code === 200) {
						that.list = that.list.concat(e.data.list)
						if (e.data.list.length > 0) that.page += 1; // 页码加一
					} else {
						uni.showToast({
							title: e.msg,
							icon:'error',
						})
						setTimeout(()=>{
							com.go('userhome')
						},2000)
					}
				}, (e) => {
					com.go('userhome')
					console.log(e)
				})
			},
			handleScrollToLower() {
				this.getData();
			}
		},
		onLoad(opts) {
			this.getData()
		}
	}
</script>

<style>
	.-body {
		/* height: calc(100vh - 150px); */
		margin-top: 140px;
		position: absolute;
		width: 100%;
		background: transparent;
		z-index: 10;
		height: calc(100vh - 140px);
	}
</style>